<template >
        <div class="createCoop">
                <!-- 选择项目-->
                <el-dialog title="选择合作项目" :visible.sync="choseCooprojectVisible" width="70%" :show-close="false" :close-on-click-modal="false">
                        合作项目：<el-input v-model="choseCooproject" placeholder="请输入" style="width:217px;"></el-input>
                        <el-button type="primary" @click="queryProject" id="monitorEnter">查询</el-button>
                        <el-button type="primary" @click="goToCreate">项目不存在，去新建</el-button>
                        <el-table :data="choseCooprojectData" border stripe style="margin:20px 0;" @row-click="getCooprojectItem">
                                <el-table-column label="序号" type="index" align="center" width="55"></el-table-column>
                                <el-table-column label=""  align="center" width="55">
                                        <template slot-scope="scope">
                                                <el-radio class="radio"  v-model="choseCooprojectRadio"  :label="scope.$index">&nbsp;</el-radio>
                                        </template>
                                </el-table-column>
                                <el-table-column label="合作项目" prop="projectName" align="center" ></el-table-column>
                                <el-table-column label="城市" prop="projectCityName" align="center" ></el-table-column>
                                <el-table-column label="开发商" prop="developerName" align="center" ></el-table-column>
                        </el-table>
                        <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="pageNum"
                                    :page-sizes="[10, 20, 40, 50]"
                                    :page-size="pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total" style="margin-top:30px;">
                         </el-pagination>
                        <div class="btns" style="margin-top:15px;">
                                <el-button type="primary" @click="closeChoseCooproject">关闭</el-button>
                                <el-button type="primary" @click="assignmentCooproject">确定</el-button>
                        </div>
                </el-dialog>
                <el-dialog title="选择合作项目" :visible.sync="newProjectVisible" width="70%" >
                        <h2>新增项目</h2>
                        <el-form ref="ruleForm"  :model="params" class="demo-form-inline" label-width="150px" :rules="rules">
                                <el-form-item label="项目名称：" prop="projectName">
                                        <el-input v-model="params.projectName" placeholder="请输入项目名称" style="width:217px;" maxlength="30"></el-input>
                                </el-form-item>
                                <el-form-item label="项目归属城市：" prop="province">
                                        <el-select v-model="params.province" @change="loadCity">
                                                <el-option v-for="(item,index) in provinces" :label="item.province" :key="index" :value="item.provinceid"></el-option>
                                        </el-select>
                                        <el-select v-model="params.city">
                                                <el-option v-for="(item,index) in citys" :label="item.city" :key="index" :value="item.cityId"></el-option>
                                        </el-select>
                                </el-form-item>
                                <el-form-item label="开发商：" prop="developer">
                                        <el-select v-model="params.developer">
                                                <el-option v-for="(item,index) in developers" :label="item.companyName" :key="index" :value="item.id"></el-option>
                                        </el-select>
                                </el-form-item>
                        </el-form>
                        <div class="btns" style="text-align:center;">
                                <el-button type="primary" @click="closeNewProject">关闭</el-button>
                                <el-button type="primary" @click="insertProject">确定</el-button>
                        </div>
                </el-dialog>
        </div>
</template>

<script>
export default {
        props:{
                choseCooprojectVisible:{//选择合作项目的boolean
                        type: Boolean,
                        default: false
                },
                 choseCooprojectData:{//选择合作项目的数据
                         type: Array,
                         default: null
                 },
                 pageNum:{//选择合作项目的的pageNum
                         type: Number,
                         default: 1
                 },
                 pageSize:{//选择合作项目的的pageSize
                         type: Number,
                         default: 10
                 },
                 total:{//选择合作项目的的total
                         type: Number,
                         default: 0
                 },
                 choseCooprojectRadio:{
                         type: Number,
                         default: -1
                 },
                 provinces:{//项目新增的省份
                         type: Array,
                         default: null
                 },
                 citys:{//项目新增的城市
                         type: Array,
                         default: null
                 },
                 developers:{//项目新增的开发商
                         type: Array,
                         default: null
                 }
        },
        data(){
                return {
                        choseCooproject:"",//选择合作项目的字段
                        newProjectVisible:false,
                        params:{
                                projectName:"",//项目名称
                                province:"",//省份id
                                // provinceName:"",//省份名称
                                city:"",//cityId
                                // cityName:"",//城市名称
                                developer:"",//开发商id
                                // developerName:""//开发商名称
                        },
                        rules:{
                                projectName:[
                                        {required:true,message: '请输入项目名称', trigger: 'blur'}
                                ],
                                province:[
                                        {required:true,message: '请选择省市', trigger: 'change'}
                                ],
                                developer:[
                                        {required:true,message: '请选择开发商', trigger: 'change'}
                                ]
                        }
                }
        },
        methods:{
                closeChoseCooproject(){
                        this.$emit("closechosecooproject")
                },
                goToCreate(){
                        this.newProjectVisible=true;
                        this.$emit("creatproject");
                },
                loadCity(){
                        this.params.city=""
                        this.$emit("projectCity",this.params.province);
                },
                closeNewProject(){
                        this.newProjectVisible=false
                },
                insertProject(){
                        this.$refs['ruleForm'].validate((valid)=>{
                                if(!valid){
                                        return
                                }
                                this.$emit("insertProject",this.params);
                                this.newProjectVisible=false;
                        })
                },
                handleSizeChange(val){
                        this.$emit("handleSizeChange",val)
                },
                handleCurrentChange(val){
                        this.$emit("handleCurrentChange",val)
                },
                getCooprojectItem(row){
                        this.$emit("getCooprojectItem",row)
                },
                assignmentCooproject(){
                        this.choseCooproject=""
                        this.$emit("assignmentCooproject")
                },
                queryProject(){
                        this.$emit("queryProject",this.choseCooproject)
                }
        }
}
</script>

<style lang="stylus" >

</style>
